@import "./../assets/scss/index.scss";
$borderColor: #f2f2f2;
:host {
    display: block;
    height: 100%;
}

.app-container {
    width: 100%;
    height: 100%;
    .sidenav-content {
        height: 100%;
        main {
            height: calc(100% - 2.6rem);
            display: block;
        }
        nav {
            height: 2.6rem;
            display: block;
            background: $bd-bottom-nav;
            color: $color-white;
            .power{
                width: pxTorem(70px);
                .material-icons{
                    color: $color-white;
                    font-size: pxTorem(30px);
                }
            }
            .nav-item{
                border-left: 1px solid #828282;
            }
            .active{
                background: $bd-bottom-active;
            }
        }
    }
    .sidenav {
        background: #f0f0f0;
        ul{
            width: pxTorem(257px);height: 100%;position: relative;
            li{padding: pxTorem(16px) 0;border-bottom: 1px solid grey;padding-left: pxTorem(30px);}
            li:last-child{
                position: absolute;bottom:0;width:100%;border-top: 1px solid grey;border-bottom: 1px solid grey;
            }
        }
        .exit{width: 100%;position: absolute;bottom:0;border-top: 1px solid grey;}
        .nav-item{
            .icon{margin-right: pxTorem(12px);font-size: pxTorem(24px)}
            .title{vertical-align: top;}
        }
    }
    .cdk-focus-trap-content {
        display: flex;
        background: #fff;
        flex-direction: column;
    }
}

.solution-title{
    width: pxTorem(220px);
    padding: 0 pxTorem(20px);
}
.w160{
    width: pxTorem(160px);
}
.material-icons{
    font-size: pxTorem(50px);
}

button{
    line-height: 1;
}


.app-delivery-container{
    height: 100%;width: 100%;
}